{% extends "base.html" %}

{% block title %}搜索 - SteHub{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <!-- 搜索框 -->
        <div class="card mb-4">
            <div class="card-body">
                <form action="{{ url_for('main.search') }}" method="get">
                    <div class="input-group input-group-lg">
                        <input type="text" name="q" class="form-control" 
                               placeholder="搜索帖子、用户..." value="{{ query or '' }}"
                               aria-label="搜索内容">
                        <select name="type" class="form-select" style="max-width: 150px;">
                            <option value="all" {% if search_type == 'all' %}selected{% endif %}>全部</option>
                            <option value="posts" {% if search_type == 'posts' %}selected{% endif %}>帖子</option>
                            <option value="users" {% if search_type == 'users' %}selected{% endif %}>用户</option>
                        </select>
                        <button class="btn btn-primary" type="submit">
                            <i class="fas fa-search me-2"></i>搜索
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {% if query %}
        <!-- 搜索结果 -->
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-search me-2"></i>搜索结果
                    {% if total_results is defined %}
                    <small class="text-muted">({{ total_results }} 个结果)</small>
                    {% endif %}
                </h5>
                <span class="text-muted">搜索词: "{{ query }}"</span>
            </div>
            <div class="card-body">
                {% if results %}
                    {% for result in results %}
                        {% if result.title is defined %}
                        <!-- 帖子结果 -->
                        <div class="search-result-item mb-4 pb-3 border-bottom">
                            <h6>
                                <a href="{{ url_for('forum.view_post', post_id=result.id) }}" class="text-decoration-none">
                                    {{ result.title }}
                                </a>
                                <span class="badge bg-primary ms-2">帖子</span>
                            </h6>
                            <p class="text-muted small mb-2">
                                <a href="#" class="text-muted">{{ result.author.username }}</a>
                                · {{ result.created_at|relative_time }}
                                {% if result.category %}
                                · <span class="badge" style="background-color: {{ result.category.color }};">
                                    {{ result.category.name }}
                                </span>
                                {% endif %}
                            </p>
                            <p class="mb-2">
                                {% if result.content %}
                                    {{ result.content|striptags|truncate(200) }}
                                {% else %}
                                    暂无内容描述
                                {% endif %}
                            </p>
                            <div class="small text-muted">
                                <i class="fas fa-eye me-1"></i>{{ result.view_count or 0 }}
                                <i class="fas fa-heart ms-2 me-1"></i>{{ result.like_count or 0 }}
                                <i class="fas fa-comment ms-2 me-1"></i>{{ result.comment_count or 0 }}
                            </div>
                        </div>
                        {% else %}
                        <!-- 用户结果 -->
                        <div class="search-result-item mb-4 pb-3 border-bottom">
                            <div class="d-flex align-items-center">
                                <img src="{{ result.avatar_url or url_for('static', filename='images/default-avatar.png') }}" 
                                     class="rounded-circle me-3" width="50" height="50" alt="头像">
                                <div class="flex-grow-1">
                                    <h6 class="mb-1">
                                        {{ result.username }}
                                        <span class="badge bg-success ms-2">用户</span>
                                        {% if result.is_online %}
                                        <span class="badge bg-info">在线</span>
                                        {% endif %}
                                    </h6>
                                    <p class="text-muted small mb-1">
                                        <i class="fas fa-envelope me-1"></i>{{ result.email }}
                                        {% if result.bio %}
                                        · {{ result.bio|truncate(100) }}
                                        {% endif %}
                                    </p>
                                    <p class="text-muted small mb-0">
                                        注册时间: {{ result.created_at|relative_time }}
                                        {% if result.role == 'admin' %}
                                        · <span class="badge bg-warning">管理员</span>
                                        {% endif %}
                                    </p>
                                </div>
                                <div>
                                    {% if current_user.is_authenticated and current_user.id != result.id %}
                                    <a href="{{ url_for('chat.private_chat', user_id=result.id) }}" 
                                       class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-comment me-1"></i>私信
                                    </a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        {% endif %}
                    {% endfor %}

                    <!-- 分页 -->
                    {% if pagination and pagination.pages > 1 %}
                    <nav aria-label="搜索结果分页">
                        <ul class="pagination justify-content-center">
                            {% if pagination.has_prev %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('main.search', q=query, type=search_type, page=pagination.prev_num) }}">
                                    上一页
                                </a>
                            </li>
                            {% endif %}

                            {% for page_num in pagination.iter_pages() %}
                                {% if page_num %}
                                    <li class="page-item {% if page_num == pagination.page %}active{% endif %}">
                                        <a class="page-link" href="{{ url_for('main.search', q=query, type=search_type, page=page_num) }}">
                                            {{ page_num }}
                                        </a>
                                    </li>
                                {% else %}
                                    <li class="page-item disabled">
                                        <span class="page-link">...</span>
                                    </li>
                                {% endif %}
                            {% endfor %}

                            {% if pagination.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('main.search', q=query, type=search_type, page=pagination.next_num) }}">
                                    下一页
                                </a>
                            </li>
                            {% endif %}
                        </ul>
                    </nav>
                    {% endif %}
                {% else %}
                    <div class="text-center py-5">
                        <i class="fas fa-search fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">没有找到相关结果</h5>
                        <p class="text-muted">尝试使用其他关键词或调整搜索范围</p>
                    </div>
                {% endif %}
            </div>
        </div>
        {% else %}
        <!-- 搜索提示 -->
        <div class="card">
            <div class="card-body text-center py-5">
                <i class="fas fa-search fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">输入关键词开始搜索</h5>
                <p class="text-muted">您可以搜索帖子标题、内容或用户名</p>
                
                <div class="row mt-4">
                    <div class="col-md-6">
                        <h6>搜索技巧</h6>
                        <ul class="list-unstyled text-start">
                            <li><i class="fas fa-lightbulb text-warning me-2"></i>使用具体的关键词</li>
                            <li><i class="fas fa-lightbulb text-warning me-2"></i>尝试不同的搜索范围</li>
                            <li><i class="fas fa-lightbulb text-warning me-2"></i>检查拼写是否正确</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>热门搜索</h6>
                        <div class="d-flex flex-wrap gap-2">
                            <a href="{{ url_for('main.search', q='Python', type='posts') }}" class="badge bg-light text-dark">Python</a>
                            <a href="{{ url_for('main.search', q='学习资料', type='posts') }}" class="badge bg-light text-dark">学习资料</a>
                            <a href="{{ url_for('main.search', q='作业', type='posts') }}" class="badge bg-light text-dark">作业</a>
                            <a href="{{ url_for('main.search', q='编程', type='posts') }}" class="badge bg-light text-dark">编程</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}